<template>
	<el-card class="common-card">
		<div class="title">{{ title }}</div>
		<div class="value">{{ value }}</div>
		<div class="card-middle">
			<slot></slot>
		</div>
		<div class="card-line"></div>
		<div class="card-bottom">
			<slot name="footer"></slot>
		</div>
	</el-card>
</template>

<script lang="ts">
export default {
	name: 'CommonCard',
	props: {
		title: {
			type: String,
			required: true,
			default: '',
		},
		value: {
			type: String,
			required: true,
			default: '',
		},
	},
}
</script>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.common-card {
	// width: 25%;
	.card-top {
		.top-title {
			font-size: 12px;
			color: #999;
		}
		.top-value {
			font-size: 25px;
			letter-spacing: 1px;
			margin: 6px 0;
		}
	}
	.card-middle {
		height: 50px;
	}
	.card-line {
		border-bottom: 1px solid #ddd;
		margin: 10px 0;
	}
	.card-bottom {
		font-size: 12px;
		color: #666;
	}
}
</style>
